<template>
  <div>
    <!-- 左边-->
    <el-row>
      <el-col :span="12" class="lightgreen-box">
        <!--观看用户人数-->
        <div id="showUser" style="text-align: center"></div>
      </el-col>
      <!-- 右边-->
      <el-col :span="12" class="orange-box">
        <el-col :span="6">
          <div class="rightMain">
            <div >
              <el-statistic title="帖子数量" :value="forumCount" />
            </div>
           <div style="margin-top: 50px">
             <el-statistic title="商品数量" :value="goodsCount" />
           </div>
          </div>
        </el-col>
      </el-col>
    </el-row>

    <el-row>

    </el-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted,ref } from 'vue';
import {userTotal} from "../../api/user";
import * as goodsApi from '@/api/goods.js'
import * as forumApi from '@/api/forum.js'
const goodsCount = ref()
const forumCount = ref()

let total

onMounted(()=>{
  userTotal().then(resp=>{
    total=resp.data
    showUser(total)
  })
  forumApi.selectForumCount().then(resp=>{
    forumCount.value = resp.data
  })
  goodsApi.selectGoodsCount().then(resp=>{
    goodsCount.value = resp.data
  })
})


//显示有多少用户
function showUser(total){
  var myChart = echarts.init(document.getElementById('showUser'));
  var option;

  option = {
    series: [
      {
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          formatter: function (value) {
            return Math.round(value * 100);
          }
        },

        data: [
          {
            value: total/100,
            name: '用户'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
}



</script>


<style scoped>
#showUser{
  width: 100%;
  height: 400px;
}
.rightMain{
  margin-top: 120px;
  text-align: center;
}
</style>
